<template>
  <div class="page-card">
    <plate-card :icon="TitleIcon" title="水肥一体化电磁阀">
      <!--      <template #header-action>-->
      <!--        <el-select v-model="currentMonitor" class="monitor-selector w-[120px]" placeholder="请选择摄像头" size="small">-->
      <!--          <el-option v-for="item in monitorList" :key="item.value" :label="item.label" :value="item.value" />-->
      <!--        </el-select>-->
      <!--      </template>-->
      <div class="valve-list my-[6px]">
        <div v-for="(item, index) in valveList" :key="index" class="valve-item">
          <span>{{ item.title }}</span>
          <span class="ml-2 text-[12px] text-[#00D8FF]">{{ item.label }}</span>
          <span :style="{ color: item.value == 1 ? '#fff' : '#bbb' }" class="ml-1 text-[8px] scale-[0.8]">当前状态：{{ item.status }}</span>
          <div class="ml-auto h-full">
            <el-switch
              v-model="item.value"
              :active-value="1"
              :inactive-value="0"
              active-color="#00D9FF"
              inactive-color="#9FA0A0"
              size="large"
            ></el-switch>
          </div>
        </div>
        <!--        <video autoplay class="video" controls src="https://oss.galaxy-x.cn/images/2024/1/8/test.mp4"></video>-->
      </div>
    </plate-card>
  </div>
</template>

<script lang="ts" setup>
  import PlateCard from '@/components/plate-card.vue'
  import TitleIcon from '@/assets/images/card-title/switch.png'
  import { ref } from 'vue'

  const valveList = ref([
    { title: '01号大棚', label: '1#电磁阀', status: '自动-打开', value: 1 },
    { title: '02号大棚', label: '1#电磁阀', status: '关闭', value: 0 },
    { title: '03号大棚', label: '1#电磁阀', status: '自动-打开', value: 1 },
    { title: '04号大棚', label: '1#电磁阀', status: '自动-打开', value: 1 },
    { title: '05号大棚', label: '1#电磁阀', status: '关闭', value: 0 },
    { title: '06号大棚', label: '1#电磁阀', status: '自动-打开', value: 1 },
    { title: '07号大棚', label: '1#电磁阀', status: '自动-打开', value: 1 },
    { title: '08号大棚', label: '1#电磁阀', status: '关闭', value: 0 },
    { title: '09号大棚', label: '1#电磁阀', status: '自动-打开', value: 1 },
    { title: '10号大棚', label: '1#电磁阀', status: '自动-打开', value: 1 },
    { title: '11号大棚', label: '1#电磁阀', status: '关闭', value: 0 },
    { title: '12号大棚', label: '1#电磁阀', status: '自动-打开', value: 1 }
  ])
</script>

<style lang="scss" scoped>
  .valve-list {
    padding-right: 20px;
    height: 104px;
    overflow-y: auto;
    background: url('@/assets/images/board-bg.png') top no-repeat;
    background-size: 100% 100%;
    &::-webkit-scrollbar {
      width: 2px;
      background-color: #004c78;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 6px;
      border: 2px solid #00d9ff;
    }

    .valve-item {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      padding: 0 0 0 16px;
      border-radius: 0 30px 30px 0;
      height: 24px;
      background: rgba(0, 115, 162, 0.5);
      &:last-child {
        margin-bottom: 0;
      }
      :deep() {
        .el-switch {
          height: 100%;
          .el-switch__core {
            height: 100%;
            border-radius: 30px;
            .el-switch__action {
              left: 0;
              width: 24px;
              height: 24px;
            }
          }
        }

        .is-checked {
          .el-switch__core {
            .el-switch__action {
              left: calc(100% - 22px);
            }
          }
        }
      }
    }
  }
</style>
